import React from 'react'
import { Link, Route } from 'react-router-dom'

import MessageDetail from './message-detail';

export default class Message extends React.Component {

  state = {
    messages: []
  }
  componentDidMount() {
    setTimeout(() => {
      const messages = [
        {
          id: 1,
          title: "message001"
        },
        {
          id: 2,
          title: "message002"
        },
        {
          id: 3,
          title: "message003"
        }
      ]
      this.setState({
        messages
      })
    }, 1000)
  }

  handleClick = (id) => {
    this.props.history.push(`/home/message/detail/${id}`)
  }

  render() {
    const { messages } = this.state
    return (
      <div>
        <ul>
          {
            messages.map(message => {
              return (
                <li key={message.id}>
                  <Link to={`/home/message/detail/${message.id}`}>{message.title}</Link>
                  <button onClick={() => this.handleClick(message.id)}>查看</button>
                </li>
              )
            })
          }
        </ul>
        <hr />
        <Route path="/home/message/detail/:id" component={MessageDetail}></Route>
      </div >
    )
  }
}